<template>
	<view class="container">
		<view class="pay-result">
			<view class="success" v-if="status">
				<view class="msg">付款成功</view>
				<view class="btns">
					<view class="btn" @tap='goOrderPage'>查看订单</view>
					<view class="btn" @tap="gotoIndex()">继续逛</view>
				</view>
			</view>
			<view class="error" v-if="!status">
				<view class="msg">付款失败</view>
				<view class="tips">
					<view class="p">请在
						<text class="time">半小时</text> 内完成付款</view>
					<view class="p">否则订单将会被系统取消</view>
				</view>
				<view class="btns">
					<view class="btn" @tap="gotoOrder()">查看订单</view>
					<view class="btn" @tap='payOrder'>重新付款</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: false,
				orderId: 0
			}
		},
		onLoad: function(options) {
			this.orderId = options.orderId;
			this.status = options.status === '1' ? true : false;
		},
		methods: {
			gotoIndex() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			gotoOrder() {
				uni.redirectTo({
					url: '../ucenter/order/order'
				})
			},
			goOrderPage: function() {
				//判断是团购订单还是普通订单，团购订单跳转到我的拼团页
				let that = this;
				// 页面初始化 options为页面跳转所带来的参数
				that.$util.request(that.$api.api.IsGroupOrder, {
					orderId: that.orderId
				}).then(function(res) {
					if (res.errno === 0 && res.data.isGroupon === 1) {
						uni.navigateTo({
							url: '/pages/groupon/myGroupon/myGroupon'
						});
					} else {
						uni.navigateTo({
							url: '/pages/ucenter/order/order'
						});
					}
				});
			},
			payOrder() {
				let that = this;
				// 模拟支付成功，同理，后台也仅仅是返回一个成功的消息而已
				// uni.showModal({
				//   title: '目前不能微信支付',
				//   content: '点击确定模拟支付成功，点击取消模拟未支付成功',
				//   success: function (res) {
				//     if (res.confirm) {
				//       util.request(api.OrderPrepay, { orderId: that.data.orderId }, 'POST').then(res => {
				//         if (res.errno === 0) {
				//           that.setData({
				//             status: true
				//           });
				//         }
				//         else {
				//           util.showErrorToast('支付失败');
				//         }
				//       });
				//     }
				//     else if (res.cancel) {
				//       util.showErrorToast('支付失败');
				//     }

				//   }
				// });

				that.$util.jhxLoadShow("重新付款，请稍后...");
				let nowTime = +new Date();
				if (nowTime - lastTime > 5000 || !lastTime) { //5秒内避免重复提交订单
					lastTime = nowTime;
				} else {
					return false;
				}

				that.$util.request(that.$api.api.OrderPrepay, {
					orderId: that.orderId
				}, 'POST').then(function(res) {

					if (res.errno === 0) {
						const payParam = res.data;
						console.log("支付过程开始")
						uni.requestPayment({
							'timeStamp': payParam.timeStamp,
							'nonceStr': payParam.nonceStr,
							'package': payParam.packageValue,
							'signType': payParam.signType,
							'paySign': payParam.paySign,
							'success': function(res) {
								console.log("支付过程成功")
								that.status= true;
							},
							'fail': function(res) {
								console.log("支付过程失败")
								that.$util.showErrorToast('支付失败');
							},
							'complete': function(res) {
								console.log("支付过程结束")
							}
						});
					}
				});
			}
		}
	}
</script>

<style>
	page {
		min-height: 100%;
		width: 100%;
		background: #fff;
	}

	.container {
		height: 100%;
		background: #fff;
	}

	.pay-result {
		background: #fff;
	}

	.pay-result .msg {
		text-align: center;
		margin: 100rpx auto;
		color: #2bab25;
		font-size: 36rpx;
	}

	.pay-result .btns {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pay-result .btn {
		text-align: center;
		height: 80rpx;
		margin: 0 20rpx;
		width: 200rpx;
		line-height: 78rpx;
		border: 1px solid #868686;
		color: #000;
		border-radius: 5rpx;
	}

	.pay-result .error .msg {
		color: #b4282d;
		margin-bottom: 60rpx;
	}

	.pay-result .error .tips {
		color: #7f7f7f;
		margin-bottom: 70rpx;
	}

	.pay-result .error .tips .p {
		font-size: 24rpx;
		line-height: 42rpx;
		text-align: center;
	}

	.pay-result .error .tips .p {
		line-height: 42rpx;
		text-align: center;
	}
</style>
